<template>
	<view>
		<view style="position: fixed;top:0;background: #F8F9FD;z-index: -2;width:100%;height:100vh;"></view>
		<view class="zdyFormItem" style="margin-top: 24rpx;box-sizing: border-box;">
			<view class="zFormIptw">
				<view class="d1" style="margin-right: auto;">员工姓名</view>
				<view style="text-align: right;">
					{{form.name}}
				</view>
			</view>
			<u-line color="#EBEDF0"></u-line>
			<view class="zFormIptw">
				<view class="d1" style="margin-right: auto;">手机号</view>
				<view style="text-align: right;">{{form.phone}}</view>
			</view>
		</view>

		<view class="zdyFormItem" style="margin-top: 24rpx;box-sizing: border-box;">
			<view class="zFormIptw">
				<view class="d1" style="margin-right: auto;">权限</view>
				<view class="zflex" style="justify-content: flex-end;">
					<div class="qxBox" v-if="form.isWriteOff==1">核销</div>
					<div class="qxBox" v-if="form.isAfterSales==1">售后管理</div>
				</view>
			</view>
		</view>

		<div class="fix-bom" style="gap: 12px;">
			<div class="btn-pay btnT1" @click="delUser()">删除</div>
			<div class="btn-pay btnT2" @click="goPage()">编辑</div>
			<div class="btn-pay btnT3" @click="toggle">权限设置</div>
		</div>

		<uni-popup ref="popup" background-color="#fff" type="bottom" border-radius="10px 10px 0 0" :mask-click="false">
			<view class="zdyPopWrap">
				<view class="zdypopTit">
					<div>权限</div>
					<uni-icons type="closeempty" size="20" class="zdypopClose" @click="closePopup"></uni-icons>
				</view>
				<div class="zflex zcenter rqhead">
					<div class="rqLabel" :class="form.isWriteOff==1?'rqLabelS':''" @click="chosePer()">核销</div>
					<div class="rqLabel" :class="form.isAfterSales==1?'rqLabelS':''" @click="chosePer2()">售后管理</div>
				</div>


				<div class="selfoot-btn selfoot-btn2" style="width: 100%;margin-top: 100rpx;" @click="submitU()">确定
				</div>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		deleteStaff,
		zpermission,
		staffDetail,
	} from '@/request/api.js'
	export default {
		data() {
			return {
				qyIdx: 1,
				form: {
					isWriteOff: 0,
					isAfterSales: 0,
				},
				eId: null,
			}
		},
		onLoad(e) {
			this.eId = e.id
			this.getDetail()
		},
		onShow() {
			this.getDetail()
		},
		methods: {

			getDetail() {
				staffDetail({
					userId: this.eId
				}).then(res => {
					this.form = res.data
				})
			},
			delUser() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: function(res) {
						if (res.confirm) {
							deleteStaff({
								id: that.form.userId
							}).then(res => {
								uni.$u.toast('删除成功')
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							})
						}
					}
				});

			},
			goPage() {
				uni.navigateTo({
					url: '/pages/my/users/addUsers?pageFrom=' + this.eId
				})
			},

			choseYou(e) {

			},
			chosePer() {
				if (this.form.isWriteOff == 0) {
					this.form.isWriteOff = 1
				} else {
					this.form.isWriteOff = 0
				}
			},
			chosePer2() {
				if (this.form.isAfterSales == 0) {
					this.form.isAfterSales = 1
				} else {
					this.form.isAfterSales = 0
				}
			},
			toggle() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
				this.getDetail()
			},
			submitU() {
				// isAfterSales	是否售后权限 1是 0否		false	

				// isWriteOff	是否核销权限 1是 0否		false	

				// userId	用户id
				zpermission(this.form).then(res => {
					this.closePopup()
				})
			},
		}
	}
</script>

<style scoped>
	.zdyFormItem {
		width: 100%;
		background: #fff;
		padding: 0 24rpx;
	}

	.zFormIptw {
		display: flex;
		height: 92rpx;
		align-items: center;
		position: relative;
	}

	.d1 {
		margin-right: 60rpx;
	}

	.d3 {
		position: absolute;
		right: 48rpx;
		color: #4475EE;
	}

	.btn-pay {
		width: 33.33%;
	}

	.btnT1 {
		color: #F75039;
		background: #fff;
		border: 1px solid #F75039;
	}

	.btnT2 {
		color: #4475EE;
		background: #fff;
		border: 1px solid #4475EE;
	}

	.btnT3 {
		background: #4475EE;
		border: 1px solid #4475EE;
	}

	.qxBox {
		margin-left: 8px;
		display: flex;
		padding: 2px 4px;
		align-items: center;
		gap: 10px;
		border-radius: 2px;
		background: #3a70f81a;
		font-size: 12px;
		color: #3A70F8;
	}
</style>